<template>
	<view>
		<!-- 导航栏 -->
		<cu-custom bgColor="bg-white" class="nav-bar" :isBack="true">
			<block slot="content">矿机商城</block>
		</cu-custom>
		<scroll-view scroll-x class="bg-green-two nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-white cur':''" v-for="(item,index) in tabList" :key="index" @tap="tabSelect" :data-id="index" id="mudamuda">
					{{item}}
				</view>
			</view>
		</scroll-view>
		<swiper class="grace-tab-swiper-full" :current="TabCur" @change="swiperChange" :style="{ height: (tabHeight-(TabCur==0?buttonHeight:0)) + 'px' }">
			<swiper-item v-for="(item, newsIndex) in tabList.length" :key="newsIndex">
				<scroll-view scroll-y="true" :data-scindex="newsIndex" @scrolltolower="scrollend" :style="{ height: (tabHeight-(TabCur==0?buttonHeight:0)) + 'px' }">
					<view class="m-store-store" v-for="(item,index) in 3" :key="index">
						<view class="m-store-banner">
							<view class="m-content">
								<view class="m-message">
									<view class="m-img">
										<image style="width: 90px;height:90px;" src="../../static/chunlei-video/logo.png"></image>
									</view>
									<view class="m-body">
										<view class="m-title">
											标题
										</view>
										<view class="m-text">
											<text class="m-text text-sm">
												算力：0.01
											</text>
											<text class="m-text padding">
												产量：15
											</text>
										</view>
										<view class="m-text">
											<text class="m-text text-sm">
												周期：720
											</text>
											<text class="m-text padding">
												价格：10
											</text>
										</view>
										<view class="m-text">
											<text class="m-text text-sm">
												限购：5
											</text>
											<!-- <text class="m-text padding">
												价格：8.5
											</text> -->
										</view>
									</view>
									<view class="m-phone" @click="buy">
										<image style="width: 60px;height:60px;" src="../../static/icon/GM.png" mode="aspectFit"></image>
									</view>
								</view>
							</view>
							
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>	
</template>
<script>
	import {
			getConmentStyle
		} from '../../common/js/getWindowHeight.js'

	export default {
		
		data() {
			return {
				buttonHeight:0,
				tabHeight: undefined,
				TabCur: 0,
				scrollLeft: 0,
				page:0,
				tabList:[
					'可兑换',
					'正在运行',
					'已结束'
				]
			}
		},
		onReady: function() {
			getConmentStyle("#mudamuda", true, this).then(res => {
				console.log(res, "+++++++++++")
				this.tabHeight = res
				// that.tabHeight = res;
			})
		},
		methods:{
			buy(){
				uni.showModal({
					title:'测试'
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			swiperChange(e) {
				this.TabCur = e.detail.current
				if (e.detail.current == 0) {
					console.log('可兑换');
					this.page = 1;
					//this.getmachine();
				}
				if (e.detail.current == 1) {
					console.log('正常');
					this.page = 1;
					//this.getmachine();
				}
				if(e.detail.current == 2){
					console.log('结束');
				}
			},
			scrollend(){
				if(this.isLoad!="loading"){ return; }
				// 修改状态
				this.page++;
				//this.getmachine();
			},
		}
	}
</script>
<style lang="scss">
	
	@keyframes showPopup {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes hidePopup {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes showLayer {
			0% {
				transform: translateY(0);
			}
			100% {
				transform: translateY(-100%);
			}
		}
		@keyframes hideLayer {
			0% {
				transform: translateY(-100%);
			}
			100% {
				transform: translateY(0);
			}
		}
	.m-store-banner{
		min-height: 270upx;
		position: relative;
		padding-top: 20upx;
		background:#eee;
		// background:url("../../static/img/storebanner.png");
		background-size: 100% 200upx;
		background-repeat: no-repeat;
		.m-content{
			width: 690upx;
			position: relative;
			bottom: 10upx;
			left: 30upx;
			right: 30upx;
			margin-top: 30upx;
			background:#fff;
			border-radius: 15upx;
			box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
			z-index: 100;
			.m-message{
				padding:20upx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: flex-end;
				.m-img{
					flex:0 0 135upx;
					height: 180upx;
					margin: 0 10px;
					// background:url("../../static/img/storebanner.png");
				}
				.m-body{
					flex: 1;
					// padding: 20upx;
					padding-left: 10upx;
					padding-bottom: 0;
					.m-title{
						font-size: 32upx;
						color:#333333
					}
					.m-text{
						font-size: 20upx;
						color:#999999;
						line-height: 38upx;
						margin-top: 10upx;
					}
					.m-time{
						font-size: 20upx;
						color:#999999;
						margin-top: 10upx;
					}
				}
				.m-phone{
					flex:0 0 40upx;
					text-align: right
				}
			}
		}
	}
	.popup {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 300;
		display: none;
		.mask{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 21;
			background-color: rgba(0, 0, 0, 0.6);
		}
		.layer {
			position: fixed;
			z-index: 22;
			bottom: -70%;
			width: 100%;
			padding: 0;
			height: 70%;
			border-radius: 20upx 20upx 0 0;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			// 购物车
			.m-shopcar-box {
				width: 100%;
				// padding: 30upx 0;
				.m-header{
					padding: 30upx 30upx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					.m-line{
						display: flex;
						color:#333333;
						font-size: 30upx;
						.m-light{
							color:#333333;
							font-size: 22upx;
							padding-left: 10upx;
						}
					}
					.m-clear-car{
						color:#333333;
						font-size:22upx;
					}
				}
				.m-shopcar-item{
					margin-left: 30upx;
					margin-right: 30upx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items:center;
					border-top: 1px solid #eee;
					padding: 20upx;
					&:last-of-type{
						border-bottom: 1px solid #eee;
					}
					.m-title{
						color:#4c4c4c;
						font-size: 26upx;
					}
					.m-price{
						color:#ff582b;
						font-size: 26upx;
					}
					.m-controne{
						// flex: 
					}
				}
			}
			.btn {
				width: 100%;
				height: 100upx;
				.button {
					width: 100%;
					height: 80upx;
					border-radius: 40upx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #f47952;
					font-size: 28upx;
				}
			}
		}
		
		&.show {
			display: block;
			.mask{
				animation: showPopup 0.2s linear both;
			}
			.layer {
				animation: showLayer 0.2s linear both;
			}
		}
		&.hide {
			display: block;
			.mask{
				animation: hidePopup 0.2s linear both;
			}
			
			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}
		&.none {
			display: none;
		}
		&.service {
			.row {
				margin: 30upx 0;
				.title {
					font-size: 30upx;
					margin: 10upx 0;
				}
				.description {
					font-size: 28upx;
					color: #999;
				}
			}
		}
		&.spec {
			.title {
				font-size: 30upx;
				margin: 30upx 0;
			}
			.sp {
				display: flex;
				view {
					font-size: 28upx;
					padding: 5upx 20upx;
					border-radius: 8upx;
					margin: 0 30upx 20upx 0;
					background-color: #f6f6f6;
					&.on {
						padding: 3upx 18upx;
						border: solid 1upx #f47925;
					}
				}
			}
			.length{
				margin-top: 30upx;
				border-top: solid 1upx #aaa;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 20upx;
				.text{
					font-size: 30upx;
				}
				.number{
					display: flex;
					justify-content: center;
					align-items: center;
					.input{
						width: 80upx;
						height: 60upx;
						margin: 0 10upx;
						background-color: #f3f3f3;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						input{
							width: 80upx;
							height: 60upx;
							display: flex;
							justify-content: center;
							align-items: center;
							text-align: center;
							font-size: 26upx;
						}
					}
					
					.sub ,.add{
						width: 60upx;
						height: 60upx;
						background-color: #f3f3f3;
						border-radius: 5upx;
						.icon{
							font-size: 30upx;
							width: 60upx;
							height: 60upx;
							display: flex;
							justify-content: center;
							align-items: center;
							
						}
					}
				}
			}
			
		}
	}
	// 商品列表样式
	.category-list{
		width: 100%;
		background-color: #fff;
		display: flex;
		padding-bottom: 99upx;
		
		.left,.right{
			background: #fff;
			position: absolute;
			top: 289upx;
			/*  #ifdef  APP-PLUS  */
			top: calc(100upx + var(--status-bar-height));
			/*  #endif  */
			bottom: 0upx;
		}
		.left{
			width: 24%;
			left: 0upx;
			background-color: #f6f3f3;
			
			.row{
				width: 100%;
				height: 90upx;
				display: flex;
				align-items: center;
				.text{
					width: 100%;
					position: relative;
					font-size: 28upx;
					display: flex;
					justify-content: center;
					color:#999999;
					.block{
						position: absolute;
						width: 0upx;
						left: 0;
					}
				}
				&.on{
					height: 100upx;
					background-color: #fff;
					.text{
						font-size: 30upx;
						// font-weight: 600;
						// color: #2d2d2d;
						.block{
							width: 10upx;
							height: 80%;
							top: 10%;
							// background-color: #f06c7a;
						}
					}
				}
			}
		}
		.right{
		   width: 76%;
			left: 24%;
			.category{
// 				width: 94%;
				padding: 20upx 30upx;
			
				.list{
					margin-top: 40upx;
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					.box{
						width: 100%;
					}
				}
			}
		}
	}
	/*抛物线小球*/
	.good_box{
	  width: 10px;
	  height: 10px;
	  position: fixed;
	  border-radius: 50%;
	  overflow: hidden;
	  left: 50%;
	  top: 50%;
	  z-index: +99;
	  background:#ff582b;
	}
</style>

